<script setup lang="ts">
import { reactive, ref } from 'vue';

import { Empty, message } from 'ant-design-vue';

import { indlyfor1688todystor } from '#/store';

import ProductItem from './product-item.vue';

const indlyfor1688tody = indlyfor1688todystor();

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

const showAddBox = ref(false);

function handleClick() {
  if (indlyfor1688tody.selectProducts.length === 0) {
    message.error('请选择商品');
    return;
  }
  indlyfor1688tody.openshowAddBox(indlyfor1688tody.selectProducts);
  // showAddBox.value = true;
}

function selectInPageAllData() {
  indlyfor1688tody.selectProducts = [
    ...indlyfor1688tody.selectProducts,
    ...indlyfor1688tody.imageToGoods.map((item: any) => {
      return item.offerId;
    }),
  ];
}
function fauna() {
  indlyfor1688tody.selectProducts = indlyfor1688tody.imageToGoods
    .filter((item: any) => {
      return !indlyfor1688tody.selectProducts.includes(item.offerId);
    })
    .map((item: any) => {
      return item.offerId;
    });
}
function clearSelect() {
  indlyfor1688tody.selectProducts = [];
}
const plainOptions = [
  {
    label: '支持抖音密文下单',
    value: 'dyCiphertext',
  },
  {
    label: '一件代发包邮',
    value: 'isOnePsaleFreePost',
  },
  {
    label: '一件代发',
    value: 'isOnePsale',
  },
  {
    label: '7天无理由退货',
    value: 'noReason7DReturn',
  },
  {
    label: '48小时发货',
    value: 'shipIn48Hours',
  },
  {
    label: '24小时发货',
    value: 'shipIn24Hours',
  },
  {
    label: '当日发货',
    value: 'shipInToday',
  },
];
const shearPrter = reactive<any>({
  min: null,
  max: null,
});
function selectQujianPrd() {
  // console.log('shearPrter', shearPrter);
  const interprt = indlyfor1688tody.imageToGoods.filter((item: any) => {
    return (
      item.price >= shearPrter.min &&
      item.price <= shearPrter.max &&
      !indlyfor1688tody.selectProducts.includes(item.offerId)
    );
  });
  // console.log('interprt', interprt);
  if (interprt.length > 0) {
    indlyfor1688tody.selectProducts.push(
      ...interprt.map((item: any) => {
        return item.offerId;
      }),
    );
  } else {
    message.error('没有可选的商品');
  }
  // if (shearPrter.min && shearPrter.max) {
  // }
}
const buyLink = import.meta.env.VITE_APP_BUY_DOUDIAN_LINK;
const buy1688Link = import.meta.env.VITE_APP_1688_ISV_URL;


</script>

<template>
  <div class="rightcontent pb-12">
    <div class="scolorbox h-full p-4">
      <div class="mb-6">
        <a-form layout="inline">
          <a-form-item label="关键词">
            <a-input
              v-model:value="indlyfor1688tody.query.imageKeywords"
              placeholder="请输入关键词"
              style="width: 300px"
            />
          </a-form-item>
          <a-form-item>
            <a-checkbox-group
              v-model:value="indlyfor1688tody.query.filters"
              :options="plainOptions"
              name="checkboxgroup"
            />
          </a-form-item>
          <a-form-item>
            <a-button
              class="mr-2"
              type="primary"
              @click="indlyfor1688tody.prtsecherImage"
            >
              查询
            </a-button>
            <a-button @click="indlyfor1688tody.resetquery"> 重置 </a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-spin :spinning="indlyfor1688tody.loading" size="large">
      
        <div style="min-height: 400px">
          <a-space :size="[18, 20]" wrap>
            <template
              v-for="i in indlyfor1688tody.imageToGoods"
              :key="i.offerId"
            >
              <ProductItem :item="i" />
            </template>
          </a-space>
          <a-empty
            v-if="
              !indlyfor1688tody.loading &&
              indlyfor1688tody.imageToGoods.length === 0
            "
            :image="simpleImage"
            description="没有找到相似商品 换一个试下"
          />
        </div>
      </a-spin>
    </div>
    <div
      class="absolute bottom-0 left-0 flex w-full justify-end justify-items-end bg-white py-2 pr-20"
    >
      <a-space align="center">
        <a-popover trigger="click">
          <template #content>
            <a-form-item label="价格区间">
              <a-space>
                <a-input-group size="small">
                  <a-input-number
                    v-model:value="shearPrter.min"
                    placeholder="最低价"
                    size="small"
                    style="width: 100px; text-align: center"
                  />
                  ～
                  <a-input-number
                    v-model:value="shearPrter.max"
                    class="site-input-right"
                    placeholder="最高价"
                    size="small"
                    style="width: 100px; text-align: center"
                  />
                </a-input-group>
                <a-button size="small" type="primary" @click="selectQujianPrd">
                  确定
                </a-button>
              </a-space>
            </a-form-item>
          </template>
          <a-button type="primary"> 选择价格区间商品 </a-button>
        </a-popover>

        <a-button
          :loading="indlyfor1688tody.loading"
          type="primary"
          @click="clearSelect"
        >
          取消选择
        </a-button>
        <a-button
          :loading="indlyfor1688tody.loading"
          type="primary"
          @click="selectInPageAllData"
        >
          全选当前页
          <!-- {{ isSelectAll ? '取消全选当前页' : '全选当前页' }} -->
        </a-button>
        <a-button
          :loading="indlyfor1688tody.loading"
          type="primary"
          @click="fauna"
        >
          反选
        </a-button>
        <!-- <a-button
          :loading="indlyfor1688tody.loading"
          type="primary"
          v-bindshop
          @click="handleClick"
        >
          批量铺货({{ selectProducts.length }})
        </a-button> -->
        <a-button
          :loading="indlyfor1688tody.loading"
          type="primary"
          v-bindshop
          @click="handleClick"
        >
          极速铺货({{ indlyfor1688tody.selectProducts.length }})
        </a-button>
        <!-- <a-pagination
            v-model:current="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :loading="loading"
            :page-size-options="['10', '20', '30', '40', '50']"
            :show-total="(total: any) => `共 ${total} 条`"
            :total="pageInfo.totalRecords"
            show-quick-jumper
            @change="onChangePagin"
          /> -->
      </a-space>
    </div>
    <!-- </template> -->

    <!-- <div v-if="!indlyfor1688tody.buyStatus.buy1688">未订购，不宜使用</div> -->
    <set-add-product-box
      v-if="showAddBox"
      v-model="showAddBox"
      :select-item-list="indlyfor1688tody.selectProducts"
    />
  </div>
</template>
<style scoped lang="scss">
.rightcontent {
  position: relative;
  width: 75%;
  height: 100%;
  overflow: hidden;

  .scolorbox {
    box-sizing: border-box;
    width: 100%;
    // height: calc(100% - 50px);
    // padding: 10px;
    overflow-y: scroll;
  }
}
</style>
